import React, { useState, useEffect } from 'react';
import { Form, Input, DatePicker, Select, Button, Space, message } from 'antd';
import { useDispatch } from 'react-redux';
import { createPassenger, updatePassenger } from '../../store/slices/passengerSlice';

const { Option } = Select;

const PassengerForm = ({ passenger, onCancel, onSuccess }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    if (passenger) {
      form.setFieldsValue({
        ...passenger,
        birth_date: passenger.birth_date ? new Date(passenger.birth_date) : null,
      });
    } else {
      form.resetFields();
    }
  }, [passenger, form]);

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      const payload = {
        ...values,
        birth_date: values.birth_date ? values.birth_date.format('YYYY-MM-DD') : null,
      };

      if (passenger) {
        await dispatch(updatePassenger({ id: passenger.id, ...payload }));
        message.success('乘客信息更新成功');
      } else {
        await dispatch(createPassenger(payload));
        message.success('乘客添加成功');
      }
      
      onSuccess();
      form.resetFields();
    } catch (error) {
      message.error(passenger ? '更新失败' : '添加失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleSubmit}
    >
      <Form.Item
        label="姓名"
        name="name"
        rules={[{ required: true, message: '请输入乘客姓名' }]}
      >
        <Input placeholder="请输入乘客姓名" />
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
        rules={[
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入有效的邮箱地址' }
        ]}
      >
        <Input placeholder="请输入邮箱地址" />
      </Form.Item>

      <Form.Item
        label="电话"
        name="phone"
        rules={[{ required: true, message: '请输入电话号码' }]}
      >
        <Input placeholder="请输入电话号码" />
      </Form.Item>

      <Form.Item
        label="出生日期"
        name="birth_date"
      >
        <DatePicker style={{ width: '100%' }} placeholder="选择出生日期" />
      </Form.Item>

      <Form.Item
        label="证件类型"
        name="document_type"
        rules={[{ required: true, message: '请选择证件类型' }]}
      >
        <Select placeholder="选择证件类型">
          <Option value="身份证">身份证</Option>
          <Option value="护照">护照</Option>
          <Option value="驾驶证">驾驶证</Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="证件号码"
        name="document_number"
        rules={[{ required: true, message: '请输入证件号码' }]}
      >
        <Input placeholder="请输入证件号码" />
      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" loading={loading}>
            {passenger ? '更新' : '添加'}
          </Button>
          <Button onClick={onCancel}>取消</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default PassengerForm;